<template>
  <view>
    <view class="head-bg padding-lr">
      <view @click="getProfile" class="user-info flex align-center justify-between">
        <view class="flex align-center">
          <image class="round head-img" :src="userInfo.avatar ? userInfo.avatar : '../../static/head.png'"
            mode="aspectFill">
          </image>
          <view class="mobile"> {{ userInfo.nick_name ? userInfo.nick_name : '请登录' }} </view>
        </view>
        <!-- <view v-if="userInfo.token" @click="navTo('edituser')" class="flex align-center info-edit">
					<view class="edit">编辑资料</view>
					<u-icon name="arrow-right" color="#848B9E" size="24"></u-icon>
				</view> -->
      </view>
      <view class="flex vip-bg justify-between align-center">
        <view @click="navTo('mycombolist')" class="taocan">
          <view class="title">我的权益</view>
          <view class="desc">对话次数： {{ num }} </view>
        </view>
        <button @click="rede" class="cu-btn">兑换码</button>
      </view>
    </view>
    <view class="mine-list padding-lr">
      <view @click="navTo('help')" class="flex item align-center">
        <u-icon name="/static/icon/mine-xin.png" size="40"></u-icon>
        <view class="flex align-center justify-between solid-bottom margin-left-sm">
          <view class="title">使用指南</view>
          <view class="flex align-center">
            <view class="desc">提问的艺术</view>
            <u-icon name="arrow-right" color="#848B9E" size="24"></u-icon>
          </view>
        </view>
      </view>
      <view @click="toVip" class="flex item align-center" v-if="showPay">
        <u-icon name="/static/icon/mine-gift.png" size="40"></u-icon>
        <view class="flex align-center justify-between solid-bottom margin-left-sm">
          <view class="title">开通权益</view>
          <view class="flex align-center">
            <view class="desc">享专属特权</view>
            <u-icon name="arrow-right" color="#848B9E" size="24"></u-icon>
          </view>
        </view>
      </view>
      <!-- #ifndef MP-WEIXIN -->
      <view @click="logout" class="flex item align-center">
        <u-icon name="/static/icon/quit.png" size="40"></u-icon>
        <view class="flex align-center justify-between solid-bottom margin-left-sm">
          <view class="title">退出登录</view>
          <view class="flex align-center">
            <!-- <view class="desc">提问的艺术</view> -->
            <u-icon name="error" color="#848B9E" size="24"></u-icon>
          </view>
        </view>
      </view>
      <!-- #endif -->
      <!-- #ifdef MP-WEIXIN -->
      <button open-type="share" class="flex item align-center">
        <u-icon name="/static/icon/mine-share.png" size="40"></u-icon>
        <view class="flex align-center justify-between solid-bottom margin-left-sm">
          <view class="title">分享好友</view>
          <view class="flex align-center">
            <!-- Todo -->
            <view v-if="config.is_share == 1" class="desc">邀请新用户兑换 {{ config.share_reward_num }} 次</view>
            <u-icon name="arrow-right" color="#848B9E" size="24"></u-icon>
          </view>
        </view>
      </button>
      <button open-type="contact" class="flex item align-center">
        <u-icon name="/static/icon/mine-service.png" size="40"></u-icon>
        <view class="flex align-center justify-between solid-bottom margin-left-sm">
          <view class="title">联系客服</view>
          <view class="flex align-center">
            <!-- <view class="desc">朋友扫码使用可赚钱</view> -->
            <u-icon name="arrow-right" color="#848B9E" size="24"></u-icon>
          </view>
        </view>
      </button>
      <button open-type="feedback" class="flex item align-center">
        <u-icon name="/static/icon/mine-xin.png" size="40"></u-icon>
        <view class="flex align-center justify-between solid-bottom margin-left-sm">
          <view class="title">问题反馈</view>
          <view class="flex align-center">
            <u-icon name="arrow-right" color="#848B9E" size="24"></u-icon>
          </view>
        </view>
      </button>
      <!-- #endif -->
      <view class="flex align-center justify-center padding-tb text-blue">
        <navigator url="../content/content?content_id=1">
          <view class=" ">用户协议</view>
        </navigator>
        <view class="text-gray padding-lr-sm">
          |
        </view>
        <navigator url="../content/content?content_id=2">
          <view class=" ">隐私政策</view>
        </navigator>
      </view>
    </view>
    <uni-popup ref="popup" type="dialog">
      <uni-popup-dialog ref="inputClose" mode="input" title="兑换码" :value="rede_code" placeholder="请输入兑换码"
        @confirm="dialogInputConfirm"></uni-popup-dialog>
    </uni-popup>
    <daxiang-getUserProfile ref="getUserProfile"></daxiang-getUserProfile>
  </view>
</template>

<script>
import {
  mapState
} from 'vuex';
export default {
  data() {
    return {
      showContact: false,
      showDevNav: false,
      rede_code: '',
      loginCode: ""
    };
  },
  computed: {
    showPay: function () {
      let platform = 'h5';
      // #ifdef APP-PLUS
      platform = 'app';
      // #endif
      // #ifdef MP-WEIXIN
      platform = 'wxmp';
      // #endif
      // #ifdef H5
      if (/MicroMessenger/i.test(navigator.userAgent)) {
        platform = 'gzh';
      }
      // #endif
      return (platform == 'gzh' && this.$store.state.config.wxGzhPay == 1) || (platform == 'wxmp' && this.$store.state.config.mpPay == 1)
    },
    ...mapState(['userInfo', 'num', 'config'])
  },
  onLoad(options) {
    // #ifdef MP-WEIXIN
    if (!this.userInfo.token) {
      uni.showLoading({
        title: "同步服务器状态..."
      })
      uni.login({
        success: (res) => {
          console.log(res)
          this.$request('/api/Member/wxMpQuickLogin', 'POST', {
            code: res.code
          }).then(rs => {
            console.log(rs)
            uni.setStorageSync('userInfo', rs.data)
            uni.setStorageSync('token', rs.token)
            rs.data.token = rs.token
            this.$store.commit('login', rs.data);
            uni.hideLoading()
          }).catch(err => {
            uni.hideLoading()
            console.log(err)
            this.$failToast(err, 'error')
          })
        }
      })
    }
    // #endif
  },
  onShareAppMessage() {
    return {
      title: '快来和胖大海聊天呀',
      path: '/pages/index/home?share_m_id=' + this.userInfo.member_id,
      imageUrl: 'https://s1.ax1x.com/2023/03/19/ppYVZRK.jpg'
    }
  },
  methods: {
    toVip() {
      uni.navigateTo({
        url: "/pages/vip/vip"
      })
    },
    navTo(id) {
      switch (id) {
        case "help":
          uni.navigateTo({
            url: '/pages/content/help'
          })
          break;
      }
    },
    showContactPop() {
      this.showContact ? this.showContact = false : this.showContact = true;
    },
    call() {
      uni.makePhoneCall({
        phoneNumber: '010-86203046'
      })
    },
    getProfile(e) {
      // #ifdef MP-WEIXIN
      //与 uni.getUserProfile的参数一致
      this.$refs.getUserProfile.open({
        desc: '授权登录',
        success: e => {
          console.log(e)
          this.$request('/api/Member/syncUserInfo', 'POST', {
            nick_name: e.userInfo.nickName,
            avatar: e.userInfo.avatarUrl
          }).then(res => {
            if (res.status == 200) {
              res.data.token = this.$store.state.token
              uni.setStorageSync('userInfo', res.data)
              this.$store.commit('syncUserInfo', res.data);
              this.$failToast('登录成功', 'success')
            }
          })
        },
        fail: err => {
          console.log(err)
        }
      });
      // #endif
      // #ifndef MP-WEIXIN
      if (!this.userInfo.member_id) {
        uni.reLaunch({
          url: "/pages/login/login"
        })
      }
      // #endif
    },
    rede() {
      this.$refs.popup.open()
    },
    dialogInputConfirm(val) {
      if (!val) {
        uni.showModal({
          content: "请输入兑换码！"
        });
        return
      }
      uni.showLoading({
        title: '兑换中...'
      })
      this.$request('/api/Redemption/rede', 'POST', {
        code: val
      }).then(res => {
        console.log(res)
        if (res.status == 200) {
          this.$refs.inputClose.close()
          uni.hideLoading()
          uni.showModal({
            content: "已兑换成功"
          })
          this.rede_code = ""
          this.$store.commit('syncUserNum', res.data.num)
        } else {
          this.$refs.inputClose.close()
          uni.hideLoading()
          uni.showModal({
            content: res.status == 201 ? res.msg : '核销失败'
          })
        }
      })
    },
    logout() {
      uni.removeStorageSync('userInfo')
      uni.removeStorageSync('token')
      this.$store.commit('logout')
      uni.reLaunch({
        url: "../index/home"
      })
    }
  },
};
</script>

<style>
/*每个页面公共css */
@import url("@/static/style/color-ui.css");
</style>

<style lang="scss">
.head-bg {
  /* #ifndef H5 */
  padding-top: var(--status-bar-height);
  margin-top: 60rpx;
  /* #endif */
  background-image: url('');
  background-repeat: no-repeat;
  background-size: 100%;
  // width: 100%;
  height: 574rpx;

  .user-info {
    /* #ifdef H5 */
    padding-top: 60rpx;
    /* #endif */
    /* #ifndef H5 */
    padding-top: 30rpx;

    /* #endif */
    .head-img {
      width: 120rpx;
      height: 120rpx;
    }

    .mobile {
      padding-left: 23rpx;
      font-size: 36rpx;
      font-weight: bold;
      color: #222222;
    }

    .info-edit {
      font-size: 24rpx;
      font-weight: 500;
      color: #848b9e;
      line-height: 18rpx;
      padding-right: 12rpx;
    }
  }

  .vip-bg {
    background-image: url("@/static/img/mine/mine-vip-bg.png");
    background-repeat: no-repeat;
    background-size: 100%;
    // width: calc(100% - 60rpx);
    height: 133rpx;
    padding: 30rpx 24rpx 30rpx 30rpx;
    margin-top: 50rpx;

    .taocan {
      color: #ffffff;

      .title {
        font-size: 30rpx;
        font-weight: bold;
        line-height: 33rpx;
      }

      .desc {
        font-size: 24rpx;
        font-weight: 500;
        line-height: 33rpx;
        padding-top: 19rpx;
      }
    }

    .cu-btn {
      height: 48rpx;
      background: linear-gradient(90deg, #ffefc9 0%, #e9c98d 100%);
      border-radius: 24rpx;
      font-size: 24rpx;
      font-weight: bold;
      color: #863f18;
      line-height: 35rpx;
    }
  }
}

.mine-list {
  margin-top: -181rpx;

  button {
    border: none;
    margin: 0;
    padding: 0;
    background-color: inherit;
  }

  button::after {
    border: none;
  }

  .item {
    // width: calc(100% - 60rpx);

    .solid-bottom {
      width: 100%;
    }

    .title {
      padding-top: 50rpx;
      padding-bottom: 50rpx;
      font-size: 32rpx;
      font-weight: bold;
      color: #141e34;
      line-height: 56rpx;
    }

    .desc {
      padding-right: 13rpx;
      font-size: 28rpx;
      font-weight: 500;
      color: #848b9e;
      line-height: 40rpx;
    }
  }
}
</style>
